import React from "react";
import {SafeAreaView, Text, TextInput, TouchableOpacity, View} from "react-native";
import Checkbox from "react-native-check-box";
import Button from "react-native-button";
import {KeyboardAwareScrollView} from "react-native-keyboard-aware-scroll-view";

import styles from "./style";
import {Icon} from "../../components/AroIconfont";
import colors from "../../styles/colors";
import AroCountDown from "../../components/AroCountdown";


export default (self, getMailCodeParams, registerParams) => (
  <SafeAreaView style={styles.safeAreaContainer}>
    <View style={styles.container}>
      <View style={styles.headerWrap}>
        <TouchableOpacity onPress={() => self.props.navigation.goBack()}>
          <View style={styles.headerLeft}>
            <Icon name={'aroIcon|iconclose'} size={14} color={colors.iconGray} />
          </View>
        </TouchableOpacity>
        <Text style={styles.headerRight} onPress={() => self.props.navigation.navigate('Login')}>
          登录
        </Text>
      </View>
      <KeyboardAwareScrollView keyboardShouldPersistTaps="handled" enableOnAndroid={true}>
        <View style={styles.keyboardContainer}>
          <Text style={styles.titleText}>新用户注册</Text>
          <View style={styles.inputWrap}>
            <TextInput
              style={styles.inputItem}
              placeholderTextColor={colors.placeholderTextGray}
              placeholder='手机号/邮箱'
              clearButtonMode='while-editing'
              autoFocus
              onChangeText={(text) => {
                registerParams.m_name = text;
                self.props.registerButtonState()
              }}
            />
          </View>
          <View style={styles.countDownInputWrap}>
            <TextInput
              style={styles.countDownInputItem}
              placeholderTextColor={colors.placeholderTextGray}
              placeholder='验证码'
              clearButtonMode='while-editing'
              onChangeText={(text) => {
                registerParams.sms_code = text;
                self.props.registerButtonState()
              }}
            />
            <AroCountDown
              textStyle={styles.countDownInputButton}
              executeFunc={(shouldStartingCounting)=>{
                self.shouldStartingCounting = shouldStartingCounting
              }}
              timerCount={60}
              timerTitle={'获取验证码'}
              enable={true}
              onClick={(shouldStartCountting)=>{
                self.sendCodeHandle(shouldStartCountting, registerParams.m_name)
              }}
            />
          </View>
          <View style={styles.inputWrap}>
            <TextInput
              style={styles.inputItem}
              placeholderTextColor={colors.placeholderTextGray}
              placeholder='登录密码'
              secureTextEntry={true}
              clearButtonMode='while-editing'
              onChangeText={(text) => {
                registerParams.m_pwd = text;
                self.props.registerButtonState()
              }}
            />
          </View>
          <View style={styles.inputWrap}>
            <TextInput
              style={styles.inputItem}
              placeholderTextColor={colors.placeholderTextGray}
              placeholder='再次输入密码'
              secureTextEntry={true}
              clearButtonMode='while-editing'
              onChangeText={(text) => {
                registerParams.m_repwd = text;
                self.props.registerButtonState()
              }}
            />
          </View>
          <View style={styles.inputWrap}>
            <TextInput
              style={styles.inputItem}
              placeholderTextColor={colors.placeholderTextGray}
              placeholder='邀请人ID（非必填）'
              clearButtonMode='while-editing'
              onChangeText={(text) => {
                registerParams.m_repwd = text;
              }}
            />
          </View>
          <View style={styles.dealContainer}>
            <Checkbox
              style={styles.checkboxItem}
              isChecked={true}
              onClick={() => {}}
              checkedImage={<Icon name={'aroIcon|iconiconcheckbox_ok'} size={14} color={colors.green}/>}
              unCheckedImage={<Icon name={'aroIcon|iconcheckbox_o'} size={14} color={colors.iconGray}/>}
              rightTextView={
                <Text style={styles.checkboxText1}>我已阅读并同意<Text style={styles.checkboxText2}>《用户协议》</Text></Text>
              }
            />
          </View>
          <View style={styles.buttonWrap}>
            <Button
              style={styles.buttonItem}
              containerStyle={styles.buttonPlugIn}
              disabledContainerStyle={styles.buttonDisabledPlugIn}
              disabled={self.props.registerButtonDisabled}
              onPress={() => self.props.memberRegister(registerParams)}
            >注册</Button>
          </View>
        </View>
      </KeyboardAwareScrollView>
    </View>
  </SafeAreaView>
);